---
title: Switch
description: A control that allows the user to toggle between checked and not checked.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-radix-switch" />

## Installation

<ComponentInstallation name="components-radix-switch" />

## Usage

```tsx
<Switch />
```

## API Reference

### Switch

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/switch#switch"
  text="Animate UI API Reference - Switch Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/switch#root"
  text="Radix UI API Reference - Switch.Root"
/>
</div>

<TypeTable
  type={{
    startIcon: {
      description: 'The icon to display on the left of the switch.',
      type: 'React.ReactElement',
      required: false,
    },
    endIcon: {
      description: 'The icon to display on the right of the switch.',
      type: 'React.ReactElement',
      required: false,
    },
    thumbIcon: {
      description: 'The icon to display on the thumb of the switch.',
      type: 'React.ReactElement',
      required: false,
    },
    pressedWidth: {
      description: 'The width of the switch indicator when pressed.',
      type: 'number',
      required: false,
      default: '19',
    },
    '...props': {
      description: 'The props of the Switch component.',
      type: 'HTMLMotionProps<"button">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `asChild` property is not supported in the `Switch` component, as it is
  used for animation.
</Callout>

## Credits

- [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/switch) for style inspiration.
